<template>
  <div class="shopcart">
    <div class="shopcartMain">
      <div class="contentLeft" @click="toggleFold">
        <div class="cartLogoWrap">
          <p :class="{'show':num > 0 }"><i class="iconfont icon-gouwuche"></i></p>
          <span :class="{'countShow':num > 0}" v-show="num > 0 ">{{num}}</span>
        </div>
        <span class="price" :class="{'show':totalPrice > 0}">¥{{totalPrice}}元</span>
        <span class="desc">另需配送费¥{{deliveryPrice}}</span>
      </div>
      <div class="contentRight" :class="{'show':totalPrice >= minPrice}">
        {{payDesc}}

      </div>
    </div>
    <div class="ballWrap">
      <transition-group tag="ul" name="ballDrop" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"
                        :css="false">
        <li class="ball" v-for="(ball,index) in balls" :key="index" v-show="ball.show">
          <div class="inner" id="inner"></div>
        </li>
      </transition-group>
    </div>
    <transition name="slideUp">
      <div class="cover" v-show="showDetails">
        <div class="cartDetails">
          <div class="cartHeader">
            <h2 class="title">购物车</h2>
            <span class="empty" @click="empty">清空</span>
          </div>
          <div class="allFoodWrap" ref="allFoodWrap">
            <ul class="allFood">
              <li v-for="food in selectFoods">
                <span class="foodName">{{food.name}}</span>
                <div class="price">
                  <span>¥{{food.price * food.count}}</span>
                </div>
                <cart-control :food="food" ref="cartConstrol"></cart-control>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  import cartControl from  'common/cartcontrol/cartcontrol';
  import BScroll from  'better-scroll';
  export default {
    components: {
      cartControl
    },
    props: {
      selectFoods: {
        type: Array,
        default (){
          return []
        }
      },
      deliveryPrice: {
        type: Number,
        default: 0
      },
      minPrice: {
        type: Number,
        default: 20
      }
    },
    data(){
      return {
        balls: [
          {"show": false},
          {"show": false},
          {"show": false},
          {"show": false},
          {"show": false}
        ],
        dropBalls: [],
        show: false
      }
    },
    computed: {
      num (){
        let count = 0;
        this.selectFoods.forEach((food) => {
          count += food.count;
        });
        return count;
      },
      totalPrice(){
        let price = 0;
        this.selectFoods.forEach((food) => {
          price += food.price * food.count;
        });
        return price;
      },
      payDesc(){
        if (this.num == 0) {
          return `¥${this.minPrice}起送`;
        } else if (this.num > 0 && this.totalPrice < this.minPrice) {
          return `还差¥${this.minPrice - this.totalPrice}起送`;
        } else {
          return `去结算`;
        }
      },
      showDetails(){
        if (!this.num) {
          this.show = false;
          return false;
        }
        let isShow = this.show;
        return isShow;

      }
    },
    methods: {
      empty(){
          this.selectFoods.forEach((food) => {
              food.count = 0 ;
          });
      },
      toggleFold(e){
        if (this.num > 0) {
          this.show = !this.show;
          if (this.show) {
            setTimeout(() => {
              if (!this.allFoodScroll) {
                this.allFoodScroll = new BScroll(this.$refs.allFoodWrap, {
                  click: true
                });
              } else {
                this.allFoodScroll.refresh();
              }
            }, 20)
          }

        }
      },
      drop(el){
        let length = this.balls.length;
        while (length--) {
          let ball = this.balls[length];
          if (!ball.show) {
            ball.show = true;
            ball.el = el;
            this.dropBalls.push(ball);
            return false;
          }
        }
      },
      beforeEnter(el){
        let length = this.balls.length;
        while (length--) {
          let ball = this.balls[length];
          if (ball.show) {
            let rect = ball.el.getBoundingClientRect();
            let x = (rect.left + 8);
            let y = -(window.innerHeight - rect.top + 8);
            console.log(el);
//            el.style.display = '';
            el.style.transform = `translate3d(0,${y}px,0)`;
            let inner = el.getElementsByClassName("inner")[0];
            console.log(inner);
            inner.style.transform = `translate3d(${x}px,0,0)`;
            return false;
          }
        }
      },
      enter(el, done){
        //浏览器重绘

        let rf = el.offsetHeight;
        setTimeout(() => {
          el.style.transform = "translate3d(0,0,0)";
          let inner = el.getElementsByClassName("inner")[0];
          inner.style.transform = "translate3d(0,0,0)";
          done()
        })
      },
      afterEnter(el){
        let ball = this.dropBalls.shift();
        if (ball.show) {
          ball.show = false;
          el.style.display = "none";
        }
      }
    }

  }
</script>

<style lang="scss">
  .shopcart {
    position: fixed;
    height: 48px;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 50;
    background: rgb(20, 29, 39);
    .shopcartMain {
      position: relative;
      z-index: 10;
      display: flex;
      .contentLeft {
        flex: 1;
        position: relative;
        padding-left: 74px;
        .cartLogoWrap {
          position: absolute;
          z-index: 10;
          left: 18px;
          top: -12px;
          width: 44px;
          height: 44px;
          padding: 6px;
          border-radius: 50%;
          background: #131D26;
          p {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: #262F38;
            color: #80858A;
            text-align: center;
            line-height: 44px;
            &.show {
              background: rgb(0, 160, 260);
              color: #fff;
            }
            i {
              font-size: 24px;
            }
          }
          .countShow {
            position: absolute;
            width: 24px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            border-radius: 8px;
            right: 0;
            top: 0;
            font-size: 9px;
            font-weight: bold;
            color: #fff;
            background: red;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .4);
          }
        }
        .price, .desc {
          display: inline-block;
          line-height: 24px;
          color: #80858A;
          font-size: 16px;

        }
        .price {
          margin: 12px 0 12px 18px;
          padding-right: 12px;
          font-weight: 700;
          border-right: 1px solid #80858A;
          &.show {
            color: #fff;
          }
        }
      }
      .contentRight {
        flex: 0 0 105px;
        width: 105px;
        font-size: 16px;
        color: rgb(149, 152, 154);
        background: rgb(43, 51, 59);
        font-weight: 700;
        line-height: 48px;
        text-align: center;
        &.show {
          background: #00B43C;
          color: #fff;
        }
      }
    }
    .ballWrap {
      position: fixed;
      left: 38px;
      bottom: 24px;
      .ball {
        transition: all 2s linear;
        .inner {
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background: rgb(0, 160, 220);
        }
      }
      .ballDrop-enter-active {
        transition: all 2s linear;
      }
    }
    .cover {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      background: rgba(0, 0, 0, .6);
      .cartDetails {
        width: 100%;
        background: #fff;
        position: absolute;
        z-index: -1;
        left: 0;
        bottom: 48px;
        .cartHeader {
          height: 40px;
          line-height: 40px;
          background: #f3f4f7;
          border-bottom: rgba(7, 17, 27, .1);
          .title {
            float: left;
            padding: 0 18px;
            font-size: 14px;
            font-weight: 200;
            color: rgb(7, 17, 27);
          }
          .empty {
            padding: 0 18px;
            float: right;
            height: 40px;
            color: rgb(0, 160, 260);
            font-size: 12px;
          }
        }
        .allFoodWrap {
          overflow: hidden;
          max-height: 250px;
          .allFood {
            padding: 0 18px;
            overflow: hidden;
            li {
              position: relative;
              /*line-height: 48px;*/
              border-bottom: 1px solid rgba(7, 17, 27, .1);
              padding: 12px 0;
              .foodName {
                font-size: 14px;
                color: rgb(7, 17, 27);
              }
              .price {
                display: inline-block;
                float: right;
                margin-right: 90px;
                font-size: 10px;
                font-weight: 700;
                color: rgb(240, 20, 20);
              }
              .cartControl {
                bottom: 12px;
              }
            }
          }
        }
      }
    }
    .slideUp-enter-active, .slideUp-leave-active {
      transition: all .5s;
    }
    .slideUp-enter, .slideUp-leave-to {
      transform: translate3d(0, 100%, 0);
    }

  }

</style>
